<template>
    <div class="view">
        <div class="chat-header">
            <cube-tab-bar v-model="selectedLabel" show-slider>
                <cube-tab label="好友" key="friend"></cube-tab>
                <!--                <cube-tab label="专家" key="expert"></cube-tab>-->
            </cube-tab-bar>
        </div>
        <cube-tab-panels v-model="selectedLabel">
            <cube-tab-panel label="好友" key="friend">
                <cube-scroll class="chat-list-scroll" :data="chatTargetList" :data-temp="refreshList">
                    <div class="chat-wrap">
                        <div class="chat-item" v-for="(target,index) in chatTargetList" @click="toChatPage(index)" :style="{order:(target.last_message?-target.last_message.time:1)}" >
                            <div class="chat-face ">
                                <div class="chat-face-picture" :class="{'chat-face-blur':user.userRank<2}" :style="{'background-image': `url(${target.avatar.file_path}?imageView2/0/h/75)`}"></div>
                                <i class="iconfont icon-suo" v-if="user.userRank <2"></i>
                                <div class="chat-sex" v-if="target.gender > 0" :class="{'chat-sex-female': target.gender === 2,'chat-sex-male':target.gender === 1}">
                                    <i class="iconfont" :class="{'icon-nv': target.gender === 2,'icon-nan':target.gender === 1}"></i>
                                </div>
                            </div>
                            <div class="chat-info">
                                <div class="chat-info-top">
                                    <div class="chat-name">{{target.nickName}}</div>
                                    <div class="chat-time" v-if="target.last_message">{{target.last_message.time | timeStamp | dateDiffSpecial}}</div>
                                </div>
                                <div class="chat-info-bottom">
                                    <div class="chat-desc ellipsis" v-if="target.last_message">{{messageHandle(target.last_message)}}</div>
                                    <badge type="danger" :text="target.countNoread+''" v-if="target.countNoread>0"></badge>
                                </div>
                            </div>
                        </div>
                    </div>
                </cube-scroll>
            </cube-tab-panel>
            <cube-tab-panel label="专家" key="expert">
                <cube-scroll class="chat-list-scroll">
                </cube-scroll>
            </cube-tab-panel>
        </cube-tab-panels>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import Badge from "@/components/aui/Badge.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import DialogConfig from "@/constant/DialogConfig";
    import {InterfaceSocket} from "@/interface/InterfaceSocket";
    import {updateDataCache} from "@/store/dispatches";
    // import Recorder from 'js-audio-recorder';

    @Component({
        components: {
            Badge
        },
    })
    export default class ChatList extends Scene {
        private selectedLabel: string = "好友";
        private chatTargetList: any[] = [];

        @State("UserStore")
        public user!: InterfaceUser;


        @State("SocketStore")
        private socket!: InterfaceSocket;

        @State("DataCacheStore")
        public dataCache!: any;

        private get refreshList(): any[] {
            this.getChatTargetList();
            return this.socket.messageArray;
        }


        private getChatTargetList(): void {
            Http.post(this.api.getChatList, {}, {token: this.user.token}).then((res) => {
                this.chatTargetList = [];
                if (res.code === 1) {
                    for (let i in res.data) {
                        res.data[i].avatar = this.userFaceSafeHandle(res.data[i]);
                    }
                    this.chatTargetList.push(...res.data);
                    updateDataCache({"friendData": this.chatTargetList});
                }
            });
        }

        private activated() {
            this.getChatTargetList();
        }

        private mounted() {
            this.chatTargetList = this.dataCache.friendData;
        }

        private messageHandle(obj: any) {
            if (this.user.userRank < 2) {
                return "【给你发了一条消息，成为会员开始聊天吧】";
            }
            if (obj.type === 1) {
                return obj.content;
            } else if (obj.type === 2) {
                return "[图片消息]";
            } else if (obj.type === 4) {
                return "[礼物消息]";
            } else {
                return "[未知消息类型]";
            }
        }

        private toChatPage(index: number): void {
            if (this.user.userRank < 2) {
                const dialogConfig = new DialogConfig();
                (<any> this).$createDialog({
                    ...dialogConfig.getBecomeMemberConfig(),
                    onConfirm: () => {
                        this.navigateTo({
                            name: "mineMemberRank",
                            query: {
                                back: 1
                            }
                        });
                    }
                }).show();
            } else {
                this.navigateTo({
                    name: "chatDetail",
                    query: {
                        toId: this.chatTargetList[index].user_id
                    }
                });
            }


        }
    }
</script>

<style scoped lang="stylus">
    .view
        background #fff;

    .chat-header
        height calc(45px + var(--safe-area-inset-top));
        padding-top var(--safe-area-inset-top);
        overflow hidden;
        position relative;

        &::after
            content ''
            display block;
            position absolute;
            height 1px;
            left 0;
            right 0;
            bottom 0;
            background #e6e6e6;
            transform scaleY(.5);

        >>> .cube-tab-bar
            justify-content center;

        >>> .cube-tab
            margin-top 5px;
            height 35px;
            display flex;
            flex none;
            padding 0 10px 0 15px;
            align-items center;
            color #a8acaf;
            font-size 15px;

        >>> .cube-tab div
            font-weight 700;

        >>> .cube-tab_active
            color $theme-common-color;
            border-bottom 0 solid $theme-common-color;

        >>> .cube-tab-bar-slider
            display none !important;
            transition none !important;
            transform none !important;

    .chat-list-scroll
        height calc(100vh - 45px - 47px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
        width 100vw;

    .chat-wrap
        display flex;
        flex-direction column;

    .chat-item
        height 70px;
        padding 10px 15px 10px 20px;
        position relative;
        display flex;
        align-items center;

        &::after
            content: '';
            display block;
            position absolute;
            height 1px;
            bottom 0;
            left 15px;
            right 0;
            background #e6e6e6;
            transform scaleY(.5);


        .chat-face
            width 50px;
            height 50px;
            border-right 50px;
            border-radius 50px;
            margin-right 10px;
            position relative;

            .chat-sex
                position absolute;
                bottom -1px;
                right -1px;
                width 17px;
                height 17px;
                display flex;
                justify-content center;
                align-items center
                background $theme-common-color;
                border-radius 20px;
                border 1px solid #fff;

                i.iconfont
                    font-size 8px;
                    color #fff;

                &.chat-sex-female
                    background $theme-female-color;

                &.chat-sex-male
                    background $theme-male-color;


            i.iconfont.icon-suo
                color #fff;
                position absolute;
                top 15px;
                left 15px;
                font-size 20px;
                opacity .8;

            .chat-face-picture
                display block;
                background-size cover;
                background-position center center;
                width 50px;
                height 50px;
                border-radius 50px;

            .chat-face-blur
                filter: blur(3px);

        .chat-info
            flex 1;
            height 50px;
            display flex;
            flex-direction column;
            justify-content center;

            .chat-info-top, .chat-info-bottom
                height 25px;
                display flex;
                justify-content space-between;
                align-items center;

                .chat-name
                    font-size 15px;
                    font-weight 700;

                .chat-time
                    color #b6b6b6;
                    font-size 12px;

                .chat-desc
                    color #a4a4a4;
                    width 230px;
                    font-size 12px;

            .chat-info-bottom
                height 20px;

                >>> .badge
                    position relative;


</style>
